<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="{{url_for('static',filename='js/jquery.min.js')}}"></script>
    <script src="{{ url_for('static',filename='js/hotMatch.js')}}?{{ version }}"></script>
    <script src="{{url_for('static',filename='js/bootstrap.min.js')}}"></script>
    <script src="{{url_for('static',filename='js/alert.js')}}"></script>
    <link rel="stylesheet" href="{{url_for('static',filename='css/bootstrap.min.css')}}">
    <style>
    .button{
        background-color: white;
        color: black;
        border: 2px solid #4CAF50;
    }

    .button:hover {
        background-color: #4CAF50;
        color: white;
    }

    .button[disabled] {
        opacity: 0.6;
        cursor: not-allowed;
    }

    </style>
    <title>热点匹配编辑</title>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">盯盘宝后台管理系统</a>
    </div>
    <div>
        <ul class="nav navbar-nav">
            <li ><a href="{{ url_for('start_web') }}">首页</a></li>
            <li ><a href="{{ url_for('permission_manage') }}">权限配置</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    管理员{{ session['admin'] if session['admin'] else "未登录" }}
                    <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="{{ url_for("login_out") }}">退出</a></li>
                </ul>
            </li>
        </ul>
    </div>
    </div>
</nav>
<div align="center">

    <div class="btn-group btn-group-lg" role="group" aria-label="...">

{#        <div class="btn-group" role="group">#}
{#        <button type="button" class="btn btn-primary" onclick="hotBlockUpdate()">强制更新热点</button>#}
{#        </div>#}

        <div class="btn-group" role="group">
        <button type="button" class="btn btn-primary" onclick="addBlock()">添加热点</button>
        </div>
    </div>
</div>
<div id="hot_match" style="margin:auto; width:80%">


    <div id="for_title" align="center">

    </div>
    <div style="margin:auto">

    <br/>
    <br/>
    <div id="hotMatchDataTable" class="table table-striped table-bordered" cellspacing="0" width="80%">
    </div>
    </div>

    <div align="center" id = "editor_to_show" >

        <div class="btn-group btn-group-lg" role="group" aria-label="...">

            <div class="btn-group" role="group">
            <button type="button" class="btn btn-success" onclick="cancelAdd()">取消添加</button>
            </div>

           <div class="btn-group" role="group">
               <button type="button" class="btn btn-success" onclick="submit()">提交</button>
           </div>
        </div>
    </div>
    <br/><br/>
</div>
<script>
    $("#editor_to_show").hide();
    function addBlock() {

            var inputList = $(".add-block-name");
            if (inputList.length>0){
                window.alert("请完成上一次的添加！！")
                return;
            }
            var tdList = $("#hotMatchDataTable").find('table > tbody > tr >td');
            var widthList = [];

            tdList.each(function(key,value){
                var value = $(value).width();
                widthList.push(value);
            });
            var trList = $("#hotMatchDataTable").find('table > tbody > tr');
            var trLength = String(trList.length+1);


            var rowStr = jQuery('<tr></tr>');
            var indexHtml = jQuery('<td>' + trLength + '</td>');
            rowStr.append(indexHtml);

            var blockNameWidth = widthList[1];
            var blockNameHtml = jQuery('<td style="width:'+String(blockNameWidth)+ 'px;">' + '<input type="text"' +
                'class="add-block-name"/>' + '</td>');
            rowStr.append(blockNameHtml);

            var origBlockWidth = widthList[2];
            var origBlockHtml = '<select class = "add-orig-block"><option>非三大报原文,手动添加</option>';
            for (var i=0;i<blockNameList.length;i++){
                origBlockHtml+='<option>'+blockNameList[i]+'</option>';
            }
            origBlockHtml += '</select>';
            origBlockHtml = jQuery('<td style="width:'+String(origBlockWidth)+'px;" >' + origBlockHtml + '</td>');
            rowStr.append(origBlockHtml);

            var isFuzzyWidth = widthList[3];
            var isFuzzyHtmlStr = '<label><input type="radio" name="add-radio" value="1" checked/>是</label>&nbsp;&nbsp;';
            isFuzzyHtmlStr += '<label><input type="radio" name="add-radio" value="2"/>否</label><br/>';
            isFuzzyHtmlStr = jQuery('<td colspan ="2" style="width:'+isFuzzyWidth+'px;">'+isFuzzyHtmlStr+'</td>');
            rowStr.append(isFuzzyHtmlStr);

            $("#editor_to_show").show();

            $("#hotMatchDataTable").find('table > tbody').append(rowStr);
            var h = $(document).height()-$(window).height();
            $(document).scrollTop(h);
    }

    function hotBlockUpdate() {
    var confirmStr = "目前热点已更新到:"+lastTradeDay+ ","
        +"请登录网站https://xuangubao.cn/yuanchuang确保下一个交易日的热点已经生成!!!";
    myConfirm('请确认:',confirmStr,function(r){
            if(r){
                //...点确定之后执行的内容
                window.alert("更新需要10秒，请耐心等待!");
            $.ajax({
             url:"/hotBlockUpdate",
             async:true,
             success:function (result) {
                if (jQuery.type(result)=="string"){
                    var obj = JSON.parse(result);
                }else{
                    var obj = result;
                }

                 var message = obj.message;
                window.alert(message);
                if (message!='非热点更新时间'){
                    location.reload();
                }
                }
                 });
            }
        });
     }

    var hotMatchDataTable = null;
    var blockNameList = [];
    var lastTradeDay = '';
    hotMatchDataTable = jQuery("#hotMatchDataTable").raytable({
    datasource: { data: [], keyfield: 'editor' },
    columns: [
        { field: "blockName", title: "板块名"},
        { field: "orig_block", title: "三大报原文"},
        { field: "is_fuzzy_match", title: "是否开启模糊匹配"},
        {field:"del_block",title:"删除"}
    ],
    pagesize: 100,
    maxPageButtons: 5,
    rowNumbers: true
});
  function cancelAdd(){
      refreshData(false);
      $("#editor_to_show").hide();
  }
  function delBlock(blockName) {
      var go = window.confirm("您确定删除板块 "+blockName +" 吗?");
      if (go==false){
          return;
      }
      $.ajax({
         url:"/delBlock",
         async:true,
         type:"POST",
          data:JSON.stringify({lastTradeDay:lastTradeDay,blockName:blockName}),
          dataType: "json",
         success:function (result) {
             refreshData(false);
         }
     });
  }
  function submit() {
      var addBlockName = $(".add-block-name").val();
      if (addBlockName == ''){
          window.alert("请填写板块名称！！");
          return
      }
      var addOrigBlock = $(".add-orig-block").val();

      var isFuzzy = $("input[name='add-radio']:checked").val();
      var go = window.confirm("您确定要添加板块 "+addBlockName+" 吗?");
      if (go = false){
          return;
      }
        $.ajax({
             url:"/addBlockSubmit",
             async:true,
             type:"POST",
              data:JSON.stringify({addBlockName:addBlockName,addOrigBlock:addOrigBlock,isFuzzy:isFuzzy}),
              dataType: "json",
             success:function (result) {
                 refreshData(false);
                 $("#editor_to_show").hide();
             }
         });

  }
  function changeFuzzy(flag,blockName){
      if (flag == '是'){
          window.alert("您已经为 "+ blockName + " 开启模糊搜索");
      }else{
          window.alert("您已经为 "+ blockName + " 关闭模糊搜索");
      }

       $.ajax({
         url:"/changeFuzzy",
         async:true,
         type:"POST",
           data:JSON.stringify({flag:flag,blockName:blockName}),
         success:function (result) {
             refreshData(false);
         }
     });
  }
  function refreshData(flag=true) {

      hotMatchDataTable.data([],'editor');

     $.ajax({
         url:"/hotMatchDataForEditor",
         async:true,
         success:function (result) {

             if (jQuery.type(result)=="string"){
                var obj = JSON.parse(result);
             }else{
                var obj = result;
             }
             var resultList = obj.resultList;
             for (var i=0;i<resultList.length;i++){
                 if (resultList[i]['orig_block']==''){
                     blockNameList.push(resultList[i]['blockName']);
                 }
             }
             lastTradeDay = obj.lastTradeDay;
             hotMatchDataTable.data(resultList,'editor');
             if (flag){
                 var htmlStr = "<h3>"+lastTradeDay+"热点</h3>";
                $("#for_title").append(htmlStr);
             }

         }
     });
 }
 refreshData();

</script>

</body>
</html>